export default {
	data() {
		return {
			// 下侧为仿美团可伸缩搜索框的样式参数。不可动
			background: {
				background: 'rgba(255, 255, 255, 0)'
			},
			searchIcon: 'hsl(0, 0%, 100%)',
			backIcon: 'hsl(0, 0%, 100%)',
			// 滚动条高度
			scrollTop: 0,
			navbarWidth: 0,
			navbarMarginLeft: 560,
			navbarBgc: 'rgba(242, 242, 242, 0)',
			opacity: 0,
			textDiaplay: 'none',
			leftDisplay: false,
		}
	},
	// 监听滚动条高度
	onPageScroll(e) {
		// 浩腾别动这儿=-=
		// e.scrollTop 表示当前页面滚动的距离
		// console.log('页面滚动距离：', e.scrollTop);
		this.scrollTop = e.scrollTop;
		if (this.scrollTop <= 100) {
			// 定义初始明度常量值
			const num = 100;
			// 定义初始左边距常量值
			const maginLeft = 560;
			// 定义初始宽度常量值
			const widthSearch = 500;
			this.navbarMarginLeft = maginLeft - this.scrollTop * 5;
			this.navbarWidth = this.scrollTop * 5;
			if (this.navbarWidth > 30) {
				// 宽度超过30，也就是超过图片宽度后再执行背景色显性操作
				this.navbarBgc = `rgba(242, 242, 242, ${this.scrollTop / 100})`;
			}
			if (this.navbarWidth > 250) {
				this.opacity = this.scrollTop / 100 - 0.5;
				this.textDiaplay = 'inline';
			}
			// 将100滚动条设置为1的单位点，赋值于背景色的透明度上
			this.background.background = `rgba(255, 255, 255, ${this.scrollTop / 100})`;
			this.backIcon = `hsl(0, 0%, ${num - this.scrollTop}%)`;
			this.searchIcon = `hsl(0, 0%, ${num - this.scrollTop}%)`;
		}
		if (this.scrollTop == 0) {
			// 由于上方超过三十后再执行，导致反执行时有0.03的色度无法初始化，故此处强制归0
			this.navbarBgc = `rgba(242, 242, 242, 0)`;
			this.background.background = `rgba(255, 255, 255, 0)`;
		}
		if (this.navbarWidth <= 250) {
			// 同样原因进行同样的处理
			this.opacity = 0;
			this.textDiaplay = 'none';
			this.leftDisplay = false;
		}
		if (this.scrollTop > 101) {
			this.navbarMarginLeft = 100;
			this.navbarWidth = 500;
			this.background.background = `rgba(255, 255, 255, 1)`;
			this.backIcon = `hsl(0, 0%, 0%)`;
			this.searchIcon = `hsl(0, 0%, 0%)`;
			const query = uni.createSelectorQuery().in(this);
			query.select('#right-asides').boundingClientRect((data) => {
				if((data.top - 85) <= 0){
					this.leftDisplay = true;
				}else{
					this.leftDisplay = false;
				}
			}).exec();
		}

	},
}